<template>
    <view class="content">
        <!-- 时间搜索 -->
        <view class="u-flex time">
            <view class="t-box" @click="KStimeShow = true">
                <input type="text" v-model="startTime" placeholder="开始时间" disabled />
                <image src="../../static/icon/time.png"></image>
            </view>
            <view class="line"></view>
            <view class="t-box" @click="JStimeShow = true">
                <input type="text" v-model="endTime" placeholder="结束时间" disabled />
                <image src="../../static/icon/time.png"></image>
            </view>
            <view class="search" @click="doSearch">搜索</view>
        </view>
        
        <view class="wrapper">
            <view class="study" v-for="(item, index) in list" :key="index" 
                @click="$gTo(`/mine/pages/child-info/child-record-details?id=${item.id}`)">
                <view>{{item.date}}</view>
                <view class="study-note">{{item.record}}</view>
                <view class="img-box" v-if="item.images && item.images.length > 0">
                    <image :src="el.image" class="study-img" v-for="(el, ind) in item.images" :key="ind"></image>
                </view>
            </view>
            
            <view style="height: 94rpx;padding-top: 30rpx;">
                <u-loadmore :status="status" v-if="status != 'loadmore'" />
            </view>
        </view>
        
        <!-- 选择时间 -->
        <u-picker v-model="KStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(1, $event)"></u-picker>
        <u-picker v-model="JStimeShow" mode="time" :params="timeParams" @confirm="chooseTime(2, $event)"></u-picker>
    </view>
</template>

<script>
	export default{
		data() {
			return {
				KStimeShow: false, //开始时间
				JStimeShow: false, //结束时间
				startTime: '', //开始时间
				endTime: '', //结束时间
				timeParams: { //时间格式
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				status: 'loadmore', //是否显示没有更多了
				page: 1,
				list: [], 
                id: '',
			}
		},
		
		onLoad(option) {
            this.id = option.id
            this.getList()
		},
        onReachBottom() {
        	if(this.page == 1){return}
        	this.getList()
        },
		methods:{
            //预览照片
            // doPreview(item, index) {
            //     let arr = []
            //     item.forEach(cur => {
            //         arr.push(cur.image)
            //     })
            //     uni.previewImage({
            //         urls: arr,
            //         current: index,
            //         longPressActions: {
            //             success: function(data) {
            //             },
            //             fail: function(err) {
            //             }
            //         }
            //     });
            // },
            
		    //选择时间
		    chooseTime(num, e) {
		    	if (num == 1) {
		            this.startTime = e.year + '-' + e.month + '-' + e.day;
		    	}
		        if (num == 2) {
		            this.endTime = e.year + '-' + e.month + '-' + e.day;
		    	}
		    },
		    // 搜索
		    doSearch() {
		        this.page = 1;
		        this.list = [];
		        this.status = 'loadmore';
		        this.getList()
		    },
            
		    getList() {
		    	if (this.status == 'nomore') return;
		    	this.status = 'loading';
		    	this.$ajax('child_record', {
		    		user_token: this.$getSync('userToken'),
		    		page: this.page,
		    		limit: 10,
                    id: this.id,//孩子资料id
                    start_date: this.startTime,//开始时间
                    end_date: this.endTime,//结束时间
		    	}).then(ret => {
		    		if (ret.success == 1000) {
		    			if (ret.detail && ret.detail.record && ret.detail.record.length > 0) {
		    				this.list = this.list.concat(ret.detail.record);
		    				this.page++;
		    				this.status = 'loadmore'
		    			} else {
		    				this.status = 'nomore'
		    			}
		    		} else {
		    			this.$toast(ret.msg);
		    		}
		    	});
		    },
		}
	}
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
    }
    
    .wrapper{
        padding: 0 20rpx 100rpx;
    }
    .study{
        background-color: #fff;
        padding: 40rpx 30rpx;
        border-radius: 15rpx;
        margin-bottom: 20rpx;
        font-size: 24rpx;
        color: #808aa5;
        line-height: 1.5;
    }
    .study-note{
        padding-top: 10rpx;
        word-break: break-all;
        white-space: pre-line;
    }
    .img-box{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-top: 20rpx;
    }
    .study-img{
        width: 194rpx;
        height: 194rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
    }
    
    
    .time {
        width: 100%;
        padding: 20rpx;
        .t-box{
            flex: 1;
            height: fit-content;
            background-color: #fff;
            position: relative;
            padding-right: 70rpx;
            border-radius: 10rpx;
            
            image{
                display: block;
                width: 38rpx;
                height: 36rpx;
                position: absolute;
                top: 50%;
                right: 22rpx;
                margin-top: -19rpx;
            }
        }
    
        input {
            width: 100%;
            height: 68rpx;
            font-size: 24rpx;
            color: #333333;
            text-indent: 25rpx;
            line-height: 68rpx;
            padding-left: 10rpx;
        }
    
        .line {
            width: 16rpx;
            height: 4rpx;
            background-color: #f29700;
            margin: 0 10rpx;
        }
    
        .search {
            font-size: 24rpx;
            color: #fff;
            line-height: 68rpx;
            background-color: #f29700;
            border-radius: 10rpx;
            padding: 0 48rpx;
            margin-left: 20rpx;
        }
    }

</style>
